<template>
    <mian-layout style="background:#fff">
        <div class="afbox">
            <el-form size="small" :model="ruleForm" ref="ruleForm" label-width="140px" class="demo-ruleForm">  
                <div class="editLabel">商品基础资料</div>
                <div style="padding-left:70px">
                    <el-form-item label="选择商品类型" prop="title" :rules="[{required: true}]">
                        <el-tag size="medium" v-for="item in goodstypes" :key="item.id" type="info" :effect="ruleForm.goodsType== item.id?'dark':'plain'" @click="ruleForm.goodsType = item.id">
                            {{ item.label }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item label="商品标题" prop="title" :rules="[{required: true}]">
                        <el-input v-model="ruleForm.title" placeholder="2-50个字符" maxlength="50" type="text" style="width: 700px;"/>
                    </el-form-item>

                    <el-form-item label="副标题" prop="subtitle" :rules="[{required: true}]">
                        <el-input v-model="ruleForm.subtitle" placeholder="2-100个字符" maxlength="100" type="textarea" style="width: 700px;" />
                    </el-form-item>

                    <el-form-item label="创作故事" prop="creatStory" style="width: 840px;" :rules="[{required: true}]">
                        <el-input type="textarea" v-model="ruleForm.creatStory" :autosize="{ minRows: 10, maxRows: 10}" placeholder="请输入创作故事"></el-input>
                    </el-form-item>

                    <el-form-item label="商品分类" prop="goodsCategoryId" style="width:540px;" :rules="[{required: true}]">
                        <goods-category v-model="ruleForm.goodsCategoryId" valuekey="goodsCategoryId" label="name"/>
                    </el-form-item>

                    <el-form-item label="关联艺术家" prop="artistId" style="width: 540px;" :rules="[{required: true}]">
                        <artilst-select v-model="ruleForm.artistId" valuekey="artistId" label="nick"/>
                    </el-form-item>

                    <el-form-item label="市场价" prop="marketPrice" :rules="[{required: true}]">
                        <el-input v-model="ruleForm.marketPrice"  placeholder="最大为10000000" type="number"  style="width: 400px;"/>
                    </el-form-item>

                    <el-form-item label="商品成本价" prop="settlePrice" :rules="[{required: true}]">
                        <el-input v-model="ruleForm.settlePrice"  placeholder="最大为10000000" type="number"  style="width: 400px;"/>
                    </el-form-item>

                    <el-form-item label="库存" prop="stock" :rules="[{required: true}]">
                        <el-input v-model="ruleForm.stock"  placeholder="最大为10000000" type="number"  style="width: 400px;"/>
                    </el-form-item>

                </div>

                <div class="editLabel">商品与地标、U3D的关联</div>
                <div style="padding-left:70px">   
                    <el-form-item label="关联AR地标" prop="marketPrice">
                        <landmark-select :type="2" v-model="ruleForm.arLandmarkIds" :defaultTxt="arLandmarkDefaultTxt" width='400px'/>
                    </el-form-item>

                    <el-form-item label="关联U3D物品" prop="settlePrice">
                        <u3d-object-select :type="3" v-model="ruleForm.arObjectId" :defaultTxt="arObjectDefaultTxt" width='400px'/>
                    </el-form-item>

                </div>
                <template v-if="ruleForm.goodsType!=3 && ruleForm.goodsType!=4">
                    <div class="editLabel">商品规格</div>
                    <div style="padding-left:70px">  
                        <el-form-item label="">
                            <el-button type="success" size="mini" icon="el-icon-plus" @click="addSpec">添加规格分类名称</el-button>
                        </el-form-item>

                        <div class="subItemBox">
                            <div class="bg">
                                <div class="specsBox" v-for="(dt,index) in ruleForm.specs" :key="`spec-${index}`">
                                    <el-form-item label="规格分类名称">
                                        <el-input v-model="dt.specGroupName" placeholder="请输入规格分类名称" style="width: 400px;"/>
                                    </el-form-item>
                                    <el-tag v-for="(item,k) in dt.specItems" :key="`tag-${index}${k}`" closable type="danger" @click="setSpec(item)" @close="delSpec(item,index,k)" style="margin-left:5px">
                                        {{item.specName || `规格名称${k+1}`}}
                                    </el-tag>
                                    <el-button size="mini" icon="el-icon-plus" type="primary" style="margin-left:5px" @click="addSpecItem(dt)">添加规格</el-button>
                                </div>
                                <!-- <my-teleport to="body" v-if="opSpec.flag"> -->
                                    <my-dialog v-if="opSpec.flag" :show.sync="opSpec.flag" :showBtn="true" width="500px" title="商品规格设置" @confirm="specSetComfirm"> 
                                        <el-form size="small" label-width="100px" class="demo-ruleForm">
                                            <el-form-item label="规格名称" prop="title">
                                                <el-input v-model="opSpec.item.specName" placeholder="2-50个字符" maxlength="50" type="text" style="width: 300px;"/>
                                            </el-form-item>
                                            <el-form-item label="规格图片" prop="title">
                                                <my-upload-file v-model='opSpec.item.imageUrl'/>
                                            </el-form-item>
                                        </el-form>
                                    </my-dialog>
                                <!-- </my-teleport> -->
                            </div>
                        </div>
                    </div>

                    <div class="editLabel">商品参数</div>
                    <div style="padding-left:70px">
                        <el-form-item label="">
                            <el-button type="success" size="mini" icon="el-icon-plus" @click="addParams">添加商品参数</el-button>
                        </el-form-item>
                        <div class="subItemBox">
                            <div class="bg">
                                <el-form v-for="(pm,i) in ruleForm.params" :inline="true" class="demo-form-inline" :key="`pm${i}`">
                                    <el-form-item label="参数名称" prop="title">
                                        <el-input v-model="pm.paramName" placeholder="2-50个字符" maxlength="50" type="text" style="width: 300px;"/>
                                    </el-form-item>
                                    <el-form-item label="参数值" prop="title">
                                        <el-input v-model="pm.paramValue" placeholder="2-50个字符" maxlength="50" type="text" style="width: 300px;"/>
                                    </el-form-item>
                                    <el-button icon="el-icon-minus" @click="delParams(i)"></el-button>
                                </el-form>
                            </div>
                        </div>
                    </div>
                    <template v-if="ruleForm.goodsType!=5">
                    <div class="editLabel">物流配置</div>
                    <div style="padding-left:70px">  

                        <el-form-item label="常规物流费用" prop="logisticsAmount">
                            <el-input v-model="ruleForm.logisticsAmount" type="number" class="headInput" style="width: 400px;"/>
                            <span class="inlineTips">(为0或者为空，表示免费)</span>
                        </el-form-item>

                        <el-form-item label="偏远地区物流费用" prop="remoteLogisticsAmount">
                            <el-input v-model="ruleForm.remoteLogisticsAmount" type="number" class="headInput" style="width: 400px;"/>
                            <div>
                                <el-checkbox-group v-model="ruleForm.remoteAreaList">
                                    <el-checkbox label="甘肃"></el-checkbox>
                                    <el-checkbox label="新疆"></el-checkbox>
                                    <el-checkbox label="内蒙古"></el-checkbox>
                                    <el-checkbox label="青海"></el-checkbox>
                                    <el-checkbox label="西藏"></el-checkbox>
                                    <el-checkbox label="宁夏"></el-checkbox>
                                    <el-checkbox label="海南"></el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                    </div>
                    </template>
                </template>

                <div class="editLabel">商品出售模式设置</div>
                <div style="padding-left:70px">  
                    <el-form-item label="出售模式" prop="saleModes" :rules="[{required: true}]">
                        <el-radio-group v-model="ruleForm.saleModes">
                            <el-radio label="DIRECT">直购模式</el-radio>
                            <el-radio label="AUCTION">拍卖模式</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div class="subItemBox">
                        <div class="bg">
                            <template v-if="ruleForm.saleModes=='AUCTION'">
                                <el-form-item label="拍卖起始价" prop="settlePrice">
                                    <el-input v-model="ruleForm.auctionPrice" type="number" style="width: 400px;" />
                                </el-form-item>
                                <el-form-item label="拍卖开始时间">
                                    <el-date-picker style="width:400px" v-model="ruleForm.auctionStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="拍卖开始时间"></el-date-picker>
                                </el-form-item>
                                <el-form-item label="拍卖结束时间">
                                    <el-date-picker style="width:400px" v-model="ruleForm.auctionEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="拍卖开始时间"></el-date-picker>
                                </el-form-item>
                            </template>
                            <template v-else>
                                <el-form-item label="会员价" prop="settlePrice">
                                    <el-input v-model="ruleForm.internalPrice" type="number" class="headInput" style="width: 400px;"/>
                                </el-form-item>
                                <el-form-item label="是否支持退货">
                                    <el-radio v-model="ruleForm.returnGoods" :label="false">不支持</el-radio>
                                    <el-radio v-model="ruleForm.returnGoods" :label="true">支持</el-radio>
                                </el-form-item>
                            </template>
                        </div>
                    </div>
                </div>

                <div class="editLabel">商品图片</div>
                <div style="padding-left:70px">  

                    <el-form-item label="商品头图" prop="headImageUrls" :rules="[{required: true}]">
                        <uploadMoreImg v-if="(id && ruleForm.headImageUrls) || !id" v-model="ruleForm.headImageUrls" title="商品头图" :limit="9"/>
                    </el-form-item>

                    <template v-if="ruleForm.goodsType==2 || ruleForm.goodsType==5">
                        <el-form-item label="上传3D模型源文件" prop="model3dFileUrls" :rules="[{required: true}]">
                            <uploadMoreFile v-if="(id && ruleForm.model3dFileUrls) || !id" v-model="ruleForm.model3dFileUrls" title="3D模型源文件" :limit="9"/>
                            <div class="tips">3D模型格式的文件支持3ds、obj、max、dae、stl、c4d、ma等格式，文件大小在100M以内</div>
                        </el-form-item>
                    </template>
                    <template v-else-if="ruleForm.goodsType==3">
                        <el-form-item label="上传视频源文件" prop="videoFileUrls" :rules="[{required: true}]">
                            <uploadMoreFile v-if="(id && ruleForm.videoFileUrls) || !id" v-model="ruleForm.videoFileUrls" title="视频源文件" :limit="9"/>
                            <div class="tips">视频格式的文件支持MP4、AVI、WMV以及MPEG格式，文件大小在100M以内</div>
                        </el-form-item>
                    </template>
                    <template v-else-if="ruleForm.goodsType==4">
                        <el-form-item label="上传音频源文件" prop="musicFileUrls" :rules="[{required: true}]">
                            <uploadMoreFile v-if="(id && ruleForm.musicFileUrls) || !id" v-model="ruleForm.musicFileUrls" title="音频源文件" :limit="9"/>
                            <div class="tips">音频格式的文件支持MP3、AAC、WAV、WMA、CDA、FLAC、M4A、MID、MKA、MP2、MPA、MPC、APE、OFR、OGG、RA、WV、TTA、AC3、DTS等格式，文件大小在100M以内</div>
                        </el-form-item>
                    </template>

                    <el-form-item label="商品详情" prop="detailImageUrls" :rules="[{required: true}]">
                        <uploadMoreImg v-if="(id && ruleForm.detailImageUrls) || !id" v-model="ruleForm.detailImageUrls" title="商品详情" :limit="9"/>
                    </el-form-item>
                </div>

                <template v-if="ruleForm.goodsType!=3 && ruleForm.goodsType!=4 && ruleForm.goodsType!=5">
                <div class="editLabel">售后服务</div>
                <div style="padding-left:70px">  

                    <el-form-item label="售后服务说明图片" prop="saleServiceImageUrls" :rules="[{required: true}]">
                        <uploadMoreImg v-if="(id && ruleForm.saleServiceImageUrls) || !id" v-model="ruleForm.saleServiceImageUrls" title="上传售后服务说明图片" :limit="9"/>
                    </el-form-item>

                    <el-form-item label="填写售后服务说明" prop="saleServiceMsg">
                        <el-input type="textarea" v-model="ruleForm.saleServiceMsg" :autosize="{ minRows: 10, maxRows: 10}" placeholder="请输入售后服务说明文字内容"></el-input>
                    </el-form-item>
                </div>
                </template>

                <br/>
                <div style="padding-left:70px">  
                    <el-form-item>
                        <template>
                            <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="unsureBtn('ruleForm')">保存</el-button>
                            <!-- <el-button icon="el-icon-close" @click="$router.back()">取消</el-button> -->
                            <my-back icon="el-icon-close">取消</my-back>
                        </template>
                    </el-form-item>
                </div>
                <br/>
                <br/>
            </el-form>
        </div>
    </mian-layout>
</template>

<script>
import {mapGetters} from 'vuex'
import { goodsAdd, goodsdetail, goodsEdit, partnerList, categoryAll} from '@/api/chain'
import {get_goods_detail,edit_goods} from '@/api/arApi'
import addSpecs from "./components/specs.vue";
import landmark from "./components/landmark.vue";
import {priceForDigitAssets} from '@/utils/index'
import artilstSelect from '@/components/public/artilstSelect.vue'
import goodsCategory from '@/components/public/goodsCategory.vue'
import uploadMoreImg from '@/components/public/uploadMoreImg.vue';
import landmarkSelect from "@/components/public/landmarkSelect.vue";
import u3dObjectSelect from "@/components/public/u3dObjectSelect.vue";
import myTeleport from '@/components/public/myTeleport.vue';
import myDialog from '@/components/public/myDialog';
import myUploadFile from '@/components/public/myUploadFile.vue'
import myBack from '@/components/public/myBack.vue'
import uploadMoreFile from '@/components/public/uploadMoreFile.vue';
import {mergeObject,priceTran} from '@/utils/index'
export default {
    name: '',
    components: {
        addSpecs,
        landmark,
        artilstSelect,
        goodsCategory,
        uploadMoreImg,
        landmarkSelect,
        u3dObjectSelect,
        myTeleport,
        myDialog,
        myUploadFile,
        myBack,
        uploadMoreFile
    },
    data() {
        return {
            ruleForm:{
                arLandmarkIds:[],
                arObjectId:'',
                artistId:'',
                auctionEndTime:'',
                auctionPrice:'',
                auctionStartTime:'',
                detailImageUrls:'',
                goodsCategoryId:'',
                headImageUrls:'',
                internalPrice:'',
                logisticsAmount:'',
                marketPrice:'',
                remoteAreaList:[],
                remoteLogisticsAmount:'',
                returnGoods:false,
                saleModes: 'DIRECT',
                saleServiceImageUrls:'',
                saleServiceMsg:'',
                settlePrice:'',
                specs:[
                    {
                        specGroupName:'',
                        specItems:[
                            {
                                imageUrl:'',
                                specName:""
                            }
                        ]
                    }
                ],
                stock:'',
                subtitle:'',
                title:'',
                params:[
                    {paramName:'',paramValue:''}
                ],
                creatStory:'',
                goodsType:1,
                model3dFileUrls:[],
                videoFileUrls:[],
                musicFileUrls:[]
            },
            arLandmarkDefaultTxt:'',
            arObjectDefaultTxt:'',
            opSpec:{
                flag:false,
                item:''
            },
            id:'',
            onlyLook:'',
            btnLoading:false,
            goodstypes:[
                {id:1,label:'实物类商品'},
                {id:2,label:'3D实物类商品'},
                {id:3,label:'视频'},
                {id:4,label:'音乐'},
                {id:5,label:'3D数字模型类'}
            ] 
        }
    },
    computed:{
        ...mapGetters({
            'goodsAddParams':'goods/goodsAddParams'
        })
    },
    watch: {
        
        
    },
    async created() {
        this.id = this.$route.query.id
        this.onlyLook = this.$route.query.onlyLook
        if(this.id){  // 编辑、查看
            const res = await get_goods_detail(this.id)
            if(res.success){
                this.ruleForm = mergeObject(this.ruleForm,res.data)
                // 处理价格
                this.ruleForm.auctionPrice = priceTran(this.ruleForm.auctionPrice)
                this.ruleForm.internalPrice = priceTran(this.ruleForm.internalPrice)
                this.ruleForm.logisticsAmount = priceTran(this.ruleForm.logisticsAmount)
                this.ruleForm.marketPrice = priceTran(this.ruleForm.marketPrice)
                this.ruleForm.remoteLogisticsAmount = priceTran(this.ruleForm.remoteLogisticsAmount)
                this.ruleForm.settlePrice = priceTran(this.ruleForm.settlePrice)
                // 处理拍卖模式
                this.ruleForm.saleModes = res.data.saleModes.code

                // 处理商品分类、艺术家下拉框
                this.ruleForm.goodsCategoryId = res.data.categoryDTO.goodsCategoryId
                this.ruleForm.artistId = res.data.artistDTO.artistId

                // 处理关联的地标和物品
                let arLandmarkIds = []
                let arLandmarkDefaultTxts = []
                res.data.arLandmarkIds.forEach(item => {
                    arLandmarkIds.push(item.arLandmarkId)
                    arLandmarkDefaultTxts.push(item.arLandmarkName)
                });
                this.ruleForm.arLandmarkIds = arLandmarkIds
                this.arLandmarkDefaultTxt = arLandmarkDefaultTxts.join(',')

                this.ruleForm.arObjectId = res.data.arObjectDTO.arObjectId
                this.arObjectDefaultTxt = res.data.arObjectDTO.objectName

                // 偏远地区处理
                this.ruleForm.remoteAreaList = res.data.remoteArea ? res.data.remoteArea.split(',') : []
            }
        } 
    },
    methods: { 
        /*********规格相关操作 start**************** */
        addSpec() {  //添加规格
            let obj = {
                specGroupName:'',
                specItems:[{imageUrl:'',specName:""}]
            }
            this.ruleForm.specs = [...this.ruleForm.specs,obj]
            this.ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
           // console.log("this.ruleForm.specs:",this.ruleForm.specs)
        },
        addSpecItem(spec){
            let obj = {imageUrl:'',specName:""}
            spec.specItems = [...spec.specItems,obj]
        },
        setSpec(item){ // 设置、修改规格名称
            this.opSpec.flag = true
            this.opSpec.item = item
        },
        delSpec(item,pindex,index){ // 删除规格名称
            this.ruleForm.specs[pindex].specItems.splice(index,1)
            //console.log("this.ruleForm.specs:",this.ruleForm.specs)
        },
        specSetComfirm(){
            console.log('this.ruleForm:',this.ruleForm)
            this.opSpec.flag = false
        },
        /*********规格相关操作 end**************** */

        addParams(){
            const obj = {paramName:'',paramValue:''}
            this.ruleForm.params=[...this.ruleForm.params,obj]
        },
        delParams(index){
            this.ruleForm.params.length>1 && this.ruleForm.params.splice(index,1)
        },

        
        backShop() {
            this.$router.back()
        },

        unsureBtn() {
            if(!this.ruleForm.title){
                this.$message({
                    message: '请输入商品标题',
                    type: 'warning'
                })
                return
            }else if(!this.ruleForm.subtitle){
                this.$message({
                    message: '请输入商品副标题',
                    type: 'warning'
                })
                return
            }else if(!this.ruleForm.creatStory){
                this.$message({
                    message: '请输入创作故事',
                    type: 'warning'
                })
                return
            }else if(!this.ruleForm.goodsCategoryId){
                this.$message({
                    message: '请选择商品分类',
                    type: 'warning'
                })
                return
            }else if(!this.ruleForm.artistId){
                this.$message({
                    message: '请选择艺术家',
                    type: 'warning'
                })
                return
            }else if(!this.ruleForm.marketPrice){
                this.$message({
                    message: '请输入商品市场价',
                    type: 'warning'
                })
                return
            }else if(!this.ruleForm.settlePrice){
                this.$message({
                    message: '请输入商品成本价',
                    type: 'warning'
                })
                return
            }else if(!this.ruleForm.stock){
                this.$message({
                    message: '请输入库存',
                    type: 'warning'
                })
                return
            }else if(!this.ruleForm.arLandmarkIds || this.ruleForm.arLandmarkIds.length<1){
                this.$message({
                    message: '请关联AR地标',
                    type: 'warning'
                })
                return
            }else if(!this.ruleForm.arObjectId){
                this.$message({
                    message: '请关联U3D物品',
                    type: 'warning'
                })
                return
            }else if(this.ruleForm.saleModes =='DIRECT'){
                if(!this.ruleForm.internalPrice){
                    this.$message({
                        message: '请输入会员价格',
                        type: 'warning'
                    })
                    return
                } 
            }else if(this.ruleForm.saleModes =='AUCTION'){
                if(!this.ruleForm.auctionPrice){
                    this.$message({
                        message: '请输入拍卖起始价',
                        type: 'warning'
                    })
                    return
                }else if(!this.ruleForm.auctionStartTime){
                    this.$message({
                        message: '请输入拍卖开始时间',
                        type: 'warning'
                    })
                    return
                }else if(!this.ruleForm.auctionEndTime){
                    this.$message({
                        message: '请输入拍卖结束时间',
                        type: 'warning'
                    })
                    return
                }  
            }
            if(this.ruleForm.goodsType==2 || this.ruleForm.goodsType==5){
                if(!this.ruleForm.model3dFileUrls || this.ruleForm.model3dFileUrls.length<1){
                    this.$message({
                        message: '请输上传3D模型源文件',
                        type: 'warning'
                    })
                    return
                }
            }else if(this.ruleForm.goodsType==3){
                if(!this.ruleForm.videoFileUrls || this.ruleForm.videoFileUrls.length<1){
                    this.$message({
                        message: '请输上传视频文件',
                        type: 'warning'
                    })
                    return
                }
            }else if(this.ruleForm.goodsType==4){
                if(!this.ruleForm.musicFileUrls || this.ruleForm.musicFileUrls.length<1){
                    this.$message({
                        message: '请输上传音频文件',
                        type: 'warning'
                    })
                    return
                }
            }

            // 图片处理
            !this.ruleForm.headImageUrls && (this.ruleForm.headImageUrls=[])
            !this.ruleForm.detailImageUrls && (this.ruleForm.detailImageUrls=[])
            !this.ruleForm.saleServiceImageUrls && (this.ruleForm.saleServiceImageUrls=[])
            
            // 价格处理
            this.ruleForm.auctionPrice = priceForDigitAssets(this.ruleForm.auctionPrice)
            this.ruleForm.internalPrice = priceForDigitAssets(this.ruleForm.internalPrice)
            this.ruleForm.logisticsAmount = priceForDigitAssets(this.ruleForm.logisticsAmount)
            this.ruleForm.marketPrice = priceForDigitAssets(this.ruleForm.marketPrice)
            this.ruleForm.remoteLogisticsAmount = priceForDigitAssets(this.ruleForm.remoteLogisticsAmount)
            this.ruleForm.settlePrice = priceForDigitAssets(this.ruleForm.settlePrice)

            // 处理商品规格和商品参数
            let lmArr = []
            for(let i=0;i<this.ruleForm.specs.length;i++){
                const item = this.ruleForm.specs[i]
                if(item.specGroupName){ 
                    let obj = {
                        specGroupName: item.specGroupName,
                        specItems:[]
                    }
                    for(let j=0;j<item.specItems.length;j++){
                        if(item.specItems[j].imageUrl && item.specItems[j].specName){
                            obj.specItems.push(item.specItems[j])
                        }
                    }
                    if(obj.specItems.length>0){
                        lmArr.push(obj) 
                    }
                }
            }
            this.ruleForm.specs = lmArr

            // let lmArr2 = []
            // for(let m=0;m<this.ruleForm.params.length;m++){
            //     const item = this.ruleForm.params[m]
            //     if(item.paramName && item.paramValue){
            //         lmArr2.push(item)
            //     }
            // }
            // this.ruleForm.params = lmArr2
            // console.log("this.ruleForm:",this.ruleForm)

            //this.btnLoading = true
            
            if(this.id){  //编辑
                edit_goods({goodsId:this.id,...this.ruleForm}).then(res => {
                    if (res.success) {
                        this.$message.success('修改成功！')
                        //this.$router.back()
                        this.$store.dispatch('tagsView/myClosePageTab',this.$route)
                    } else {
                        //this.$message.error(res.message)
                    }
                    this.btnLoading = false
                })
            }else{
                goodsAdd(this.ruleForm).then(res => {
                    if (res.success) {
                        this.$message.success('添加成功！')
                       // this.$router.back()
                       this.$store.dispatch('tagsView/myClosePageTab',this.$route)
                    } else {
                       // this.$message.error(res.message)
                    }
                    this.btnLoading = false
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .afbox{
        padding:0 0 0 30px;
        .color999{
            color: #999;
            font-size: 12px;
        }
        .editLabel{
            font-family: SimHei;
            font-weight: 700;
            margin-top: 40px;
            margin-bottom: 30px;
            color: #333;
            font-size: 16px;
            &::before{
                content: '';
                display: block;
                float: left;
                width: 10px;
                height: 10px;
                background: #409eff;
                margin: 5px 15px 0 0;
            }
        }
        .uptubox{
            display: flex;
            
        }
        .zbtime{
            width: 483px;
            display: flex;
            .tmitem{
                flex: 1;
            }
            .label{
                padding: 0 10px 0 0;
                color: #999;
            }
        }
        .subItemBox{
            padding: 0 0 0 140px;
            margin:  0 0 20px 0;
            .bg{
                background: #f8f9fb;
                border-radius:2px ;
                padding: 20px 20px 1px 20px;
            }
            .specsBox{
                padding: 0 0 20px 0;
                &+.specsBox{
                    border-top: 1px dashed #cccaca;
                    padding-top: 20px;
                }
            }
            
        }
        .wxNoticeMsgBox{
            background: #fff;
            width: 600px;
            padding: 15px 15px 1px 0;
        }
        .tsxxBox{
            color: #f05656;
            a{ 
                color: #4433e4;
                text-decoration: underline;
                position: relative;
                z-index: 10;
                &:hover{
                    span{
                        display: block;
                    }
                }
                span{
                    left: 68px;
                    top: 50%;
                    margin: -400px 0 0 0;
                    position: absolute;
                    z-index: 10;
                    width: 500px;
                    display: none;
                    img{
                        display: block;
                        width: 100%;
                    }
                }
            }
        }
        .inlineTips{
            padding: 0 0 0 10px;
            color: #333;
            font-size: 12px;
        }
        .tips{
                color: #999;
                font-size: 14px;
                line-height: 24px;
                padding: 0;
            }
    }
</style>
<style lang="scss">
    .afbox{
        .el-checkbox{
            margin-right: 15px;
        }
        .el-tag{
            height: 34px;
            line-height: 34px;
            margin-right: 10px;
            min-width: 95px;
            text-align: center;
            cursor: pointer;
        }
    }
</style>